<template>
  <div class="app-container">
    <div class="notice-container">
      <!-- 左侧树形菜单 -->
      <div class="left-menu">
        <div class="search-box">
          <el-input placeholder="搜索" prefix-icon="Search" v-model="searchKeyword" clearable />
        </div>
        <div class="tree-container">
          <div class="tree-title">
            <el-icon><Folder /></el-icon>
            <span>公告栏目</span>
          </div>
          <el-tree
            :data="categoryData"
            :props="defaultProps"
            node-key="id"
            highlight-current
            default-expand-all
            @node-click="handleNodeClick"
          />
        </div>
      </div>

      <!-- 右侧内容区域 -->
      <div class="right-content">
        <div class="toolbar">
          <div class="left-tools">
            <el-button-group>
              <el-button icon="Back">
                <el-icon><ArrowLeft /></el-icon>
              </el-button>
              <el-button icon="Forward">
                <el-icon><ArrowRight /></el-icon>
              </el-button>
              <el-button icon="Refresh">
                <el-icon><Refresh /></el-icon>
              </el-button>
            </el-button-group>
            <el-button icon="Plus" @click="handleAdd">
              <el-icon><Plus /></el-icon>
            </el-button>
            <el-button type="primary" icon="Edit" @click="handleEdit" :disabled="!hasSelected">
              已选择{{ selectedCount }}条
              <el-icon><Edit /></el-icon>
            </el-button>
            <el-button icon="Delete" @click="handleDelete" :disabled="!hasSelected">
              <el-icon><Delete /></el-icon>
            </el-button>
          </div>
        </div>

        <!-- 表格区域 -->
        <div class="table-container">
          <el-table
            :data="noticeData"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange"
            highlight-current-row
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="No." width="60" />
            <el-table-column prop="category" label="公告栏目" width="120" />
            <el-table-column prop="title" label="标题" min-width="200" />
            <el-table-column prop="isEnabled" label="启用" width="80">
              <template #default="{ row }">
                <el-checkbox v-model="row.isEnabled" disabled />
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="登记人" width="100" />
            <el-table-column prop="createTime" label="登记时间" width="160" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { 
  Folder, 
  Search, 
  ArrowLeft, 
  ArrowRight, 
  Refresh, 
  Plus, 
  Edit, 
  Delete 
} from '@element-plus/icons-vue'

// 搜索关键词
const searchKeyword = ref('')

// 分类数据
const categoryData = ref([
  {
    id: 1,
    label: '公告栏目',
    children: [
      { id: 11, label: '公告' },
      { id: 12, label: '通知', isSelected: true },
      { id: 13, label: '新闻' },
      { id: 14, label: '视窗' }
    ]
  }
])

const defaultProps = {
  children: 'children',
  label: 'label'
}

// 公告数据
const noticeData = ref([
  {
    id: 1,
    category: '通知',
    title: '新闻内容',
    isEnabled: true,
    creator: '刘旭',
    createTime: '2022-06-17 16:47:22'
  },
  {
    id: 2,
    category: '通知',
    title: '季节熬制',
    isEnabled: true,
    creator: '刘旭',
    createTime: '2022-06-17 16:45:47'
  }
])

// 选中的行
const selectedRows = ref([])

// 计算属性：是否有选中的行
const hasSelected = computed(() => selectedRows.value.length > 0)

// 计算属性：选中的行数
const selectedCount = computed(() => selectedRows.value.length)

// 处理节点点击
const handleNodeClick = (data) => {
  console.log('选中节点:', data)
  // 这里可以根据选中的节点加载对应的公告数据
}

// 处理表格选择变化
const handleSelectionChange = (selection) => {
  selectedRows.value = selection
}

// 处理添加
const handleAdd = () => {
  console.log('添加公告')
}

// 处理编辑
const handleEdit = () => {
  console.log('编辑公告:', selectedRows.value)
}

// 处理删除
const handleDelete = () => {
  console.log('删除公告:', selectedRows.value)
}
</script>

<style lang="less" scoped>
.app-container {
  height: 100%;
  background-color: #f0f2f5;
  padding: 0;
}

.notice-container {
  display: flex;
  height: 100%;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.left-menu {
  width: 220px;
  border-right: 1px solid #e6e6e6;
  display: flex;
  flex-direction: column;
  
  .search-box {
    padding: 10px;
    border-bottom: 1px solid #e6e6e6;
  }
  
  .tree-container {
    flex: 1;
    overflow: auto;
    padding: 10px;
    
    .tree-title {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      font-weight: bold;
      
      .el-icon {
        margin-right: 5px;
      }
    }
  }
}

.right-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  
  .toolbar {
    padding: 10px;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    justify-content: space-between;
    
    .left-tools {
      display: flex;
      gap: 10px;
    }
  }
  
  .table-container {
    flex: 1;
    padding: 10px;
    overflow: auto;
  }
}
</style>
